<template>
  <section>
    <div class="type">
      <img :src="IMGBASE64.WODEGONGZUO2X" class="pink">
      <span class="title">数据字典</span>
      <el-button class="addBtn" type="success" size="small" @click="newLeftshow">新增</el-button>
      <div class="kong1"></div>
      <div class="row" v-for="item in typeArray">
        <div class="left">
          <span @click="getData(item)">{{item.dictName}}</span>
        </div>
        <div class="right">
          <!-- <i class="el-icon-edit-outline"></i> -->
          <i class="el-icon-edit" @click="leftXiugai(item)"></i>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <div class="manage">
      <img :src="IMGBASE64.WODEGONGZUO2X" class="pink">
      <span class="title">评价模板类型</span>
      <el-button class="addBtn" type="success" size="small" @click="newshow">新增</el-button>
      <div class="kong"></div>
      <template>
        <el-table :data="tablemsg" style="width: 100%">
          <el-table-column prop="id" label="#" align="center"></el-table-column>
          <el-table-column prop="dictDataValue" label="字典名称" align="center"></el-table-column>
          <el-table-column prop="dictDataCode" label="字典类型CODE值" min-width="150" align="center"></el-table-column>
          <el-table-column prop="createTime2" label="创建时间" align="center" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="updateTime2" label="修改时间" align="center" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column label="操作" align="center">
            <template scope="scope">
              <el-button
                size="small"
                type="text"
                @click="xiugaishow(scope)"
                >编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
      </template>
    </div>

    <div class="up" v-show="newShow">
      <img :src="IMGBASE64.GREENXINZENG2X" class="img">
      <span class="title">新增字典</span>
      <el-button icon="el-icon-close" class="close" @click="newshow"></el-button>
      <header>
        <span class="header-title">基本信息</span>
      </header>
      <div class="form">
        <div class="content">
          <el-form label-width="100px">
            <el-form-item label="类型">
              <input type="text" v-model="type" class="text">
            </el-form-item>
            <el-form-item label="Code">
              <input type="text" v-model="code" class="text">
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="bottom">
        <div class="right">
          <el-button type="success" @click="addData()" size="small">确定</el-button>
        </div>
      </div>
    </div>

    <div class="up" v-show="newLeftShow">
      <img :src="IMGBASE64.GREENXINZENG2X" class="img">
      <span class="title">新增字典</span>
      <el-button icon="el-icon-close" class="close" @click="newLeftshow"></el-button>
      <header>
        <span class="header-title">基本信息</span>
      </header>
      <div class="form">
        <div class="content">
          <el-form label-width="100px">
            <el-form-item label="类型">
              <input type="text" v-model="addLeft.name" class="text">
            </el-form-item>
            <el-form-item label="Code">
              <input type="text" v-model="addLeft.code" class="text">
            </el-form-item>
            <el-form-item label="cusTom">
              <el-select v-model="addLeft.cusTom" size="small">
                <el-option v-for="item in cusTomArray" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="bottom">
        <div class="right">
          <el-button type="success" @click="addLeftData()" size="small">确定</el-button>
        </div>
      </div>
    </div>

    <div class="details" v-show="xiugaiShow">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">修改</span>
      <el-button icon="el-icon-close" class="close" @click="closeXiugai()"></el-button>
      <div class="body">
        <div class="form">
          <div class="content">
            <el-form label-width="100px">
              <el-form-item label="名称">
                <input type="text" v-model="xiugai.type" class="text">
              </el-form-item>
              <el-form-item label="Code">
                <input type="text" v-model="xiugai.code" class="text">
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="button">
        <el-button type="success" @click="xiugaiData()" size="small">确定</el-button>
      </div>
    </div>

    <div class="details" v-show="leftXiugaiShow">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">修改</span>
      <el-button icon="el-icon-close" class="close" @click="closeLeftXiugai"></el-button>
      <div class="body">
        <div class="form">
          <div class="content">
            <el-form label-width="100px">
              <el-form-item label="类型">
                <input type="text" v-model="leftXiugaiForm.type" class="text">
              </el-form-item>
              <el-form-item label="Code">
                <input type="text" v-model="leftXiugaiForm.code" class="text">
              </el-form-item>
              <el-form-item label="cusTom">
                <el-select v-model="leftXiugaiForm.cusTom">
                  <el-option v-for="item in cusTomArray" :label="item.name" :value="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="button">
        <el-button type="success" @click="changeLeftData()" size="small">确定</el-button>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="anShow"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      typeArray: [],
      cusTomArray: [{
        name: 'SYS系统'
      }, {
        name: 'CUSTOM自定义'
      }],
      type: null,
      code: null,
      typeId: null,
      xiugai: {
        type: null,
        code: null,
        id: null,
        isValid: null
      },
      leftXiugaiForm: {
        type: null,
        code: null,
        cusTom: 'SYS系统',
        id: null
      },
      upShow2: false,
      dialogVisible: null,
      dialogImageUrl: null,
      leftId: null,
      total: 0,
      page: 1,
      paging: true,
      addLeft: {
        name: null,
        code: null,
        cusTom: 'SYS系统'
      },
      filterText: null,
      radio: '1',
      subjectSelect: null,
      subjectOption: ['复印油纸审批', '打印纸审批', '教学用品审批', '加班申请审批', '校车审批'],
      newShow: false,
      anShow: false,
      xiugaiShow: false,
      newLeftShow: false,
      leftXiugaiShow: false,
      tablemsg: [],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value5: []
    }
  },
  methods: {
    successPreview (file) {
      let abc = []
      console.log(file.data)
      abc = file.data
      for (var i = 0; i < abc.length; i++) {
        this.form.attach.push(abc[i])
      }
    },
    getLeftData () {
      this.$http.post(this._httpUrl + 'sys/dict/dictType/list', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.typeArray = response.data.data
          // for (var i = 0; i < this.tablemsg.length; i++) {
          //   this.tablemsg[i].haha = this.tablemsg[i].createTime.format('yyyy-MM-dd hh:mm:ss')
          //   console.log(this.tablemsg[i].haha)
          // }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getData (item) {
      this.leftId = item.id
      this.$http.post(this._httpUrl + 'sys/dict/dictData/page', {dictTypeId: item.id, page: (this.page), rows: 10}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tablemsg = response.data.data.results
          for (var i = 0; i < this.tablemsg.length; i++) {
            this.tablemsg[i].createTime2 = this.changeTime(this.tablemsg[i].createTime)
            this.tablemsg[i].updateTime2 = this.changeTime(this.tablemsg[i].updateTime)
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    changeTime (value) {
      if (value != null) {
        var date = new Date(value)
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
      } else {
        return null
      }
    },
    addData () {
      this.$http.post(this._httpUrl + 'sys/dict/dictData/add', {dictTypeId: this.leftId, dictDataCode: this.code, dictDataValue: this.type}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.newShow = !this.newShow
          this.anShow = !this.anShow
          this.$http.post(this._httpUrl + 'sys/dict/dictData/page', {dictTypeId: this.leftId, page: (this.page), rows: 10}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
            if (response.body.code === '000') {
              this.tablemsg = response.data.data.results
              for (var i = 0; i < this.tablemsg.length; i++) {
                this.tablemsg[i].createTime2 = this.changeTime(this.tablemsg[i].createTime)
                this.tablemsg[i].updateTime2 = this.changeTime(this.tablemsg[i].updateTime)
              }
            } else if (response.body.code === '887') {
              this.$router.push('/')
            } else if (response.body.code === '889') {
              this.$router.push('/')
            }
          })
          this.type = null
          this.typeId = null
          this.code = null
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    xiugaishow (scope) {
      this.xiugaiShow = !this.xiugaiShow
      this.anShow = !this.anShow
      this.xiugai.type = scope.row.dictDataValue
      this.xiugai.code = scope.row.dictDataCode
      this.xiugai.id = scope.row.id
      this.xiugai.isValid = scope.row.isValid
    },
    closeXiugai () {
      this.xiugaiShow = !this.xiugaiShow
      this.anShow = !this.anShow
    },
    xiugaiData () {
      this.$http.post(this._httpUrl + 'sys/dict/dictData/update', {id: this.xiugai.id, dictDataValue: this.xiugai.type, dictDataCode: this.xiugai.code, isValid: this.xiugai.isValid}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.$http.post(this._httpUrl + 'sys/dict/dictData/page', {dictTypeId: this.leftId, page: (this.page), rows: 10}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
            if (response.body.code === '000') {
              this.tablemsg = response.data.data.results
              for (var i = 0; i < this.tablemsg.length; i++) {
                this.tablemsg[i].createTime2 = this.changeTime(this.tablemsg[i].createTime)
                this.tablemsg[i].updateTime2 = this.changeTime(this.tablemsg[i].updateTime)
              }
            } else if (response.body.code === '887') {
              this.$router.push('/')
            } else if (response.body.code === '889') {
              this.$router.push('/')
            }
          })
          this.xiugaiShow = !this.xiugaiShow
          this.anShow = !this.anShow
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    newshow () {
      this.newShow = !this.newShow
      this.anShow = !this.anShow
    },
    newLeftshow () {
      this.newLeftShow = !this.newLeftShow
      this.anShow = !this.anShow
    },
    addLeftData () {
      this.$http.post(this._httpUrl + 'sys/dict/dictType/add', {dictName: this.addLeft.name, dictCode: this.addLeft.code, dictType: this.addLeft.cusTom}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.getLeftData()
          this.newLeftShow = !this.newLeftShow
          this.anShow = !this.anShow
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    leftXiugai (item) {
      this.leftXiugaiForm.type = item.dictName
      this.leftXiugaiForm.code = item.dictCode
      this.leftXiugaiForm.id = item.id
      this.leftXiugaiShow = !this.leftXiugaiShow
      this.anShow = !this.anShow
    },
    changeLeftData () {
      this.$http.post(this._httpUrl + 'sys/dict/dictType/update', {id: this.leftXiugaiForm.id, dictName: this.leftXiugaiForm.type, dictCode: this.leftXiugaiForm.code, dictType: this.leftXiugaiForm.cusTom}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.getLeftData()
          this.leftXiugaiShow = !this.leftXiugaiShow
          this.anShow = !this.anShow
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    closeLeftXiugai () {
      this.leftXiugaiShow = !this.leftXiugaiShow
      this.anShow = !this.anShow
    },
    afocuse () {
      this.upShow2 = true
    },
    ablur () {
      this.upShow2 = false
    },
    handleCurrentChange (val) {
      this.page = val
      this.$http.post(this._httpUrl + 'sys/dict/dictData/page', {dictTypeId: this.leftId, page: (this.page), rows: 10}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tablemsg = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    }
  },
  mounted () {
    this.getLeftData()
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
.form{
  .content{
    .row{
      padding: 20px 0 !important;
    }
  }
}
.upload-demo{
  min-height: 150px;
  border-radius: 10px;
  border: 2px dashed #d7d7d7;
}
.textarea{
  resize : none; 
}
.text{
  border: 0;
  border-bottom: 1px solid #d7d7d7;
}
.type{
  width: 34%;
  position: relative;
  float: left;
  background: #FFF;
  margin-left: 2%;
  margin-top: 50px;
  border-radius: 5px;
  padding-top: 20px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  .row{
    border-bottom: 1px solid #d7d7d7;
    padding: 14px 0;
    margin-left: 3%;
    margin-right: 3%;
    span{
      margin-left: 20px;
      cursor: pointer;
      font-size: 15px;
    }
    i{
      cursor: pointer;
    }
    .icon{
      margin-right: 20px;
    }
    .left{
      float: left;
      span:hover{
        color: #409eff;
      }
    }
    .right{
      float: right;
    }
    .clear{
      clear: both;
    }
  }
  .kong1{
    padding-top: 10px;
  }
}
.manage{
  width: 60%;
  position: relative;
  float: left;
  background: #FFF;
  margin-left: 2%;
  margin-top: 50px;
  border-radius: 5px;
  padding-top: 20px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
}
.pink{
  position: absolute;
  left: 24px;
  top: -25px;
}
.title{
  margin-left: 116px;
}
.details{
  width: 35%;
  position: fixed;
  left: 50%;
  top: 60px;
  margin-left: -18%;
  background: #FFF;
  border-radius: 5px;
  z-index: 99999;
  padding: 20px 10px 10px 10px;
  .button{
    text-align: center;
  }
  .row{
    margin-left: 85px;
  }
  .text{
    border: 0;
    border-bottom: 1px solid #d7d7d7;
  }
}
select{
  border: 0;
  border-bottom: 1px solid #D7D7D7;
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  padding-left: 5px;
  padding-right: 18px;
}
</style>

<style scoped>
  .choose{
    margin-left: 12%;
  }
  .secondLine{
    width: 55%;
    float: left;
  }
  .clear{
    clear: both;
  }
  .secondLine .filter-tree{
    margin-left: 15.6%;
    width: 50%; height: 40%;
    overflow: auto;
  }
  .addBtn{
    position: absolute; right: 2%;
  }
  div[data-v-22bf8d34] ul
  {
    /*position: relative;
    left: 12%;*/
  }
  div[data-v-22bf8d34]
  {
    padding-bottom: 10px;
  }
  .el-upload--picture-card
  {
    width: 80px; height: 80px;
  }
  .el-upload--picture-card i
  {
    position: relative; top: -28px;
  }
  .tree{
    position: relative; left: 60%;
    width: 40%;
  }
  .span{
    opacity: 0;
  }

  .up{
    width: 35% !important;
    position: fixed !important;
    top: 10% !important;
    left: 50% !important;
    margin-left: -18% !important;
    background: #FFF !important;
    padding: 20px 20px 0 20px !important;
    border-radius: 5px !important;
    z-index: 99999 !important;
  }
  .up .img{
    position: absolute;
    left: 24px;
    top: -20px;
  }
  .up .title{
    margin-left: 90px;
  }
  .up header{
    height: 24px;
    border-bottom: 2px solid #D7D7D7;
    padding: 30px 0 10px 0;
    margin-left: 1%;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .up .header-title{
    height: 24px;
    display: inline-block;
    color: #FB7862;
    border-bottom: 2px solid #FB7862;
    padding: 0 10px 10px 10px;
    margin-left: 0;
  }
  .up .form{
    margin-right: 10px;
  }
  .up .form .firstLine{
    padding: 30px 0 10px 0;
  }
  .up .form .secondLine{
    padding: 30px 0 10px 0;
  }
  .up .form .form-longText{
    width: 50%;
    border: 0;
    border-bottom: 1px solid #D7D7D7;
  }
  .up .form .form-text{
    width: 70%;
    border: 0;
    border-bottom: 1px solid #D7D7D7;
  }
  .up ul{
    margin-top: 30px;
    margin-left: 75px;
  }
  .up ul li{
    float: left;
  }
  .up .bottom{
    border-top: 1px solid #D7D7D7;
    margin-top: 20px;
    background: #F8F8F8;
    padding: 8px 0;
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 0 0 5px 5px;
  }
  .up .bottom .right{
    text-align: right;
    padding: 0 10px 0 0;
  }
</style>
